<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bislite Урок5 Специфичность CSS</title>
  <link href="https://fonts.googleapis.com/css?family=Lato:400,700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/slick.css">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/media.css">
</head>

<body>
  <header class="header">
    <div class="container">
      <div class="header__inner">
        <div class="header__logo">
          <a href="#">
            <span>Bis</span>Lite
          </a>
        </div>

        <nav class="header__menu">

          <div class="header__menu-btn">
            <div class="header__menu-row"></div>
            <div class="header__menu-row"></div>
            <div class="header__menu-row"></div>
          </div>

          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>

            <li class="header__drop-down drop-down"><a class="drop-down__link" href="#">
                Services
              </a>
              <ul class="drop-down__list">
                <li><a href="#">Web Design</a></li>
                <li><a href="#">Wordpress Design</a></li>
                <li><a href="#">Mobile App Devplopment</a></li>
                <li><a href="#">Internet Marketing</a></li>
                <li><a href="#">Social Media Management</a></li>
              </ul>
            </li>

            <li class="header__drop-down drop-down"><a class="drop-down__link" href="#">Portfolio
              </a>
              <ul class="drop-down__list">
                <li><a href="#">Web Design</a></li>
                <li><a href="#">Wordpress Design</a></li>
                <li><a href="#">Mobile App Devplopment</a></li>
                <li><a href="#">Internet Marketing</a></li>
                <li><a href="#">Social Media Management</a></li>
              </ul>
            </li>

            <li class="header__link-blog"><a href="#">Blog</a></li>
            <li><a href="#">Contact Us</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </header>

  <section class="slider">
    <div class="container">
      <div class="slider__inner">

        <div class="slider__item">
          <div class="slider__item-text">
            We design clean, crisp & memorable icons
          </div>
        </div>
        <div class="slider__item">
          <div class="slider__item-text">
            We design clean, crisp & memorable icons
          </div>
        </div>
        <div class="slider__item">
          <div class="slider__item-text">
            We design clean, crisp & memorable icons
          </div>
        </div>
        <div class="slider__item">
          <div class="slider__item-text">
            We design clean, crisp & memorable icons
          </div>
        </div>
        <div class="slider__item">
          <div class="slider__item-text">
            We design clean, crisp & memorable icons
          </div>
        </div>

      </div>
    </div>
  </section>


  <section class="items">
    <div class="container">
      <div class="items__inner">

        <div class="item">
          <div class="item__title">
            <div class="item__icons">
              <img src="images/icons/item-1.svg" alt="icon">
            </div>
            Clean Theme
          </div>
          <div class="item__text">Ut nec lorem id orci convallis porta. Donec pharetra neque eu velit dictum molestie.
            Duis porta gravida augue sed
            viverra. Quisque at nulla leo, non aliquet mi.
          </div>
          <a href="#" class="item__link">Read More</a>
        </div>

        <div class="item">
          <div class="item__title">
            <div class="item__icons">
              <img src="images/icons/item-2.svg" alt="icon">
            </div>
            Responsive Design
          </div>
          <div class="item__text">Ut nec lorem id orci convallis porta. Donec pharetra neque eu velit dictum molestie.
            Duis
            porta gravida augue sed
            viverra. Quisque at nulla leo, non aliquet mi.
          </div>
          <a href="#" class="item__link">Read More</a>
        </div>

        <div class="item">
          <div class="item__title">
            <div class="item__icons">
              <img src="images/icons/item-3.svg" alt="icon">
            </div>
            Fully layerd PSD
          </div>
          <div class="item__text">Ut nec lorem id orci convallis porta. Donec pharetra neque eu velit dictum molestie.
            Duis
            porta gravida augue sed
            viverra. Quisque at nulla leo, non aliquet mi.
          </div>
          <a href="#" class="item__link">Read More</a>
        </div>

        <div class="item">
          <div class="item__title">
            <div class="item__icons">
              <img class="telegram-icons" src="images/icons/item-4.svg" alt="icon">
            </div>
            Ready for coding
          </div>
          <div class="item__text">Ut nec lorem id orci convallis porta. Donec pharetra neque eu velit dictum molestie.
            Duis
            porta gravida augue sed
            viverra. Quisque at nulla leo, non aliquet mi.
          </div>
          <a href="#" class="item__link">Read More</a>
        </div>

      </div>
    </div>
  </section>


  <section class="works">
    <div class="container">
      <div class="works__title">latest works</div>
      <div class="works__inner">

        <div class="works__inner-item">
          <div class="works__inner-box">
            <img src="images/slider/item-1.jpg" alt="works slider">
            <div class="works__inner-link">
              <a href="#"><img src="images/slider/optic.svg" alt="eye"></a>
              <a href="#"><img src="images/slider/link.svg" alt="link"></a>
            </div>
          </div>
        </div>
        <div class="works__inner-item">
          <div class="works__inner-box">
            <img src="images/slider/item-2.jpg" alt="works slider">
            <div class="works__inner-link">
              <a href="#"><img src="images/slider/optic.svg" alt="eye"></a>
              <a href="#"><img src="images/slider/link.svg" alt="link"></a>
            </div>
          </div>
        </div>
        <div class="works__inner-item">
          <div class="works__inner-box">
            <img src="images/slider/item-3.jpg" alt="works slider">
            <div class="works__inner-link">
              <a href="#"><img src="images/slider/optic.svg" alt="eye"></a>
              <a href="#"><img src="images/slider/link.svg" alt="link"></a>
            </div>
          </div>
        </div>
        <div class="works__inner-item">
          <div class="works__inner-box">
            <img src="images/slider/item-4.jpg" alt="works slider">
            <div class="works__inner-link">
              <a href="#"><img src="images/slider/optic.svg" alt="eye"></a>
              <a href="#"><img src="images/slider/link.svg" alt="link"></a>
            </div>
          </div>
        </div>

        <div class="works__inner-item">
          <div class="works__inner-box">
            <img src="images/slider/item-1.jpg" alt="works slider">
            <div class="works__inner-link">
              <a href="#"><img src="images/slider/optic.svg" alt="eye"></a>
              <a href="#"><img src="images/slider/link.svg" alt="link"></a>
            </div>
          </div>
        </div>
        <div class="works__inner-item">
          <div class="works__inner-box">
            <img src="images/slider/item-2.jpg" alt="works slider">
            <div class="works__inner-link">
              <a href="#"><img src="images/slider/optic.svg" alt="eye"></a>
              <a href="#"><img src="images/slider/link.svg" alt="link"></a>
            </div>
          </div>
        </div>
        <div class="works__inner-item">
          <div class="works__inner-box">
            <img src="images/slider/item-3.jpg" alt="works slider">
            <div class="works__inner-link">
              <a href="#"><img src="images/slider/optic.svg" alt="eye"></a>
              <a href="#"><img src="images/slider/link.svg" alt="link"></a>
            </div>
          </div>
        </div>
        <div class="works__inner-item">
          <div class="works__inner-box">
            <img src="images/slider/item-4.jpg" alt="works slider">
            <div class="works__inner-link">
              <a href="#"><img src="images/slider/optic.svg" alt="eye"></a>
              <a href="#"><img src="images/slider/link.svg" alt="link"></a>
            </div>
          </div>
        </div>

        <div class="works__inner-item">
          <div class="works__inner-box">
            <img src="images/slider/item-1.jpg" alt="works slider">
            <div class="works__inner-link">
              <a href="#"><img src="images/slider/optic.svg" alt="eye"></a>
              <a href="#"><img src="images/slider/link.svg" alt="link"></a>
            </div>
          </div>
        </div>
        <div class="works__inner-item">
          <div class="works__inner-box">
            <img src="images/slider/item-2.jpg" alt="works slider">
            <div class="works__inner-link">
              <a href="#"><img src="images/slider/optic.svg" alt="eye"></a>
              <a href="#"><img src="images/slider/link.svg" alt="link"></a>
            </div>
          </div>
        </div>
        <div class="works__inner-item">
          <div class="works__inner-box">
            <img src="images/slider/item-3.jpg" alt="works slider">
            <div class="works__inner-link">
              <a href="#"><img src="images/slider/optic.svg" alt="eye"></a>
              <a href="#"><img src="images/slider/link.svg" alt="link"></a>
            </div>
          </div>
        </div>
        <div class="works__inner-item">
          <div class="works__inner-box">
            <img src="images/slider/item-4.jpg" alt="works slider">
            <div class="works__inner-link">
              <a href="#"><img src="images/slider/optic.svg" alt="eye"></a>
              <a href="#"><img src="images/slider/link.svg" alt="link"></a>
            </div>
          </div>
        </div>

        <div class="works__inner-item">
          <div class="works__inner-box">
            <img src="images/slider/item-1.jpg" alt="works slider">
            <div class="works__inner-link">
              <a href="#"><img src="images/slider/optic.svg" alt="eye"></a>
              <a href="#"><img src="images/slider/link.svg" alt="link"></a>
            </div>
          </div>
        </div>
        <div class="works__inner-item">
          <div class="works__inner-box">
            <img src="images/slider/item-2.jpg" alt="works slider">
            <div class="works__inner-link">
              <a href="#"><img src="images/slider/optic.svg" alt="eye"></a>
              <a href="#"><img src="images/slider/link.svg" alt="link"></a>
            </div>
          </div>
        </div>
        <div class="works__inner-item">
          <div class="works__inner-box">
            <img src="images/slider/item-3.jpg" alt="works slider">
            <div class="works__inner-link">
              <a href="#"><img src="images/slider/optic.svg" alt="eye"></a>
              <a href="#"><img src="images/slider/link.svg" alt="link"></a>
            </div>
          </div>
        </div>
        <div class="works__inner-item">
          <div class="works__inner-box">
            <img src="images/slider/item-4.jpg" alt="works slider">
            <div class="works__inner-link">
              <a href="#"><img src="images/slider/optic.svg" alt="eye"></a>
              <a href="#"><img src="images/slider/link.svg" alt="link"></a>
            </div>
          </div>
        </div>


      </div>
    </div>
  </section>


  <section class="clients">
    <div class="container">
      <div class="clients__inner">

        <div class="testimonials">
          <div class="testimonials__title">testimonial</div>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut nulla sapien, at aliquam erat. Sed
            vitae massa
            tellus. Aliquam commodo aliquam metus, sed iaculis nibh tempus id. Lorem ipsum dolor sit amet, consectetur
            adipiscing
            elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam nec nisi
            in nisl
            euismod fringilla.

            <span>John Travis, CEO, DomainName.com</span>
          </p>
        </div>

        <div class="clients-logo">
          <div class="clients-logo__title">our clients</div>
          <div class="clients-logo__images">
            <img src="images/clients/client-logo.jpg" alt="clients-logo">
          </div>
        </div>

      </div>

      <div class="download">
        <div class="download__text">
          This is a clean and modern, four column website PSD template. You can code it into a Wordpress website, HTML5
          responsive
          website for your personal or client works. So ahead and download this wonderful PSD template!
        </div>
        <div class="download__btn">
          <a href="#" download>download psd</a>
        </div>
      </div>

    </div>
  </section>


  <footer class="footer">
    <div class="container">
      <div class="footer__inner">

        <div class="footer__item footer__item-content">
          <div class="footer__items-title">About us</div>
          <div class="footer__text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod placerat dui et tincidunt. Sed
            sollicitudin
            posuere auctor. Phasellus at ultricies nisl. Integer at leo eros. Ut nec lorem id orci convallis porta.
            Donec pharetra
            neque eu velit dictum molestie.
          </div>
        </div>

        <div class="footer__item footer__item-list">
          <div class="footer__items-title">Explore</div>
          <ul class="footer__list">
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Blog</a></li>
          </ul>
        </div>

        <div class="footer__item">
          <div class="footer__items-title">Browse</div>
          <ul class="footer__list">
            <li><a href="#">Careers</a></li>
            <li><a href="#">Press & Media</a></li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">Terms of Service</a></li>
            <li><a href="#">Privacy Policy</a></li>
          </ul>
        </div>

        <div class="footer__item footer__item-contact">
          <div class="footer__items-title">contact us</div>
          <div class="footer__adress">
            <span>BisLite Inc.</span>
            Always Street 265
            0X - 125 - Canada
          </div>
          <div class="footer__phone">
            Phone: <a href="tel:987-6543-210"></a> 
            Fax: <a href="tel:987-6543-210"></a>   
          </div>
        </div>

        <div class="footer__item footer__item-social">
          <div class="footer__items-title">connect with us</div>
          <ul class="footer__social">
            <li><a href="#"><img src="images/social/facebook.png" alt=""></a></li>
            <li><a href="#"><img src="images/social/dribbble.png" alt=""></a></li>
            <li><a href="#"><img src="images/social/pinterest.png" alt=""></a></li>
            <li><a href="#"><img src="images/social/linkedin.png" alt=""></a></li>
            <li><a href="#"><img src="images/social/skype.png" alt=""></a></li>
            <li><a href="#"><img src="images/social/share.png" alt=""></a></li>
          </ul>
        </div>

      </div>
      <div class="footer__bottom">
        <div class="footer__copy">
          © Copyright 2012 - BisLite Inc. All rights reserved. Some free icons used here are created by Brankic1979.com.
          Client Logos are copyright and trademark of the respective owners / companies.
        </div>
        <div class="footer__logo">
          <a href="#">
            <span>Bis</span>Lite
          </a>
        </div>
      </div>
    </div>
  </footer>





  <script src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="js/slick.min.js"></script>
  <script src="js/main.js"></script>
</body>

</html>

<!-- ctrl+H - сетка в PS -->
<!-- ctrl+A, ctrc+C - работа с текстом -->
<!-- ctrl+R - направляющие -->
<!-- alt+scroll - масштабирование -->
<!-- пробел - движение по макету -->
<!-- ctrl+N - создать новую вкладку -->
<!-- ctrl+shift-S - сохранить как -->

<!-- Урок про приоритетность css
    <div class="test">
      <div class="box">
        <h1 class="title" id="title-top" style="color: blueviolet">Lorem, ipsum dolor.</h1>
      </div>
    </div> -->